<template>
    <div id="officialInformation">
        <Header></Header>
        <div class="top">
            <img src="https://cdn.firstfilm.org.cn/wp-content/uploads/fly-images/2550/新闻中心_02-1920x0-c.jpg">
            <div id="title">
                <h1 style="font-size: 7vw" >官方资讯</h1>
                <h5>首页 / 官方资讯</h5>
            </div>
        </div>
        <div class="content">
            <div class="item" v-for="(item,index) in article" :key="index">
                <router-link :to="{name:'Article',query:{title:item.title,context:item.content}}">
                    <img :src="item.cover">
                    <h4 class="item-title">
                        {{item.title}}
                    </h4>
                    <div class="time">
                        2021-11-04
                    </div>
                </router-link>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    import {getArticleApi} from "../api";

    export default {
        name: "OfficialInformation.vue",
        components:{
            Header,Footer
        },
        data(){
          return{
              article:[]
          }
        },
        methods:{
            getArticle(){
                getArticleApi({
                    page:1,
                    pageSize:100
                }).then(res => {
                    this.article = res.data.list
                })
            }
        },
        mounted() {
            this.getArticle()
        }
    }
</script>

<style scoped>
    .top{
        position: relative;
    }
    #title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: white;
    }
    .content{
        width: 100%;
        min-height: 100vh;
    }
    .item{
        margin-left: 2%;
        margin-top: 2vh;
        float: left;
        width: 22%;
        background: white;
        height: 60vh;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        transition: 1s;
        border-radius: 5px;
    }
    .item img{
        width: 18vw;
        min-height: 70%;
        margin-top: 2vh;
        border: 1px solid white;
    }
    .item:hover{
        background: black;
        color: white;
    }
</style>
